
var Options = window.Options || {};
// 广告投放的vue页面js
var vue = new Vue({
    el: '#VueApp',
    delimiters: ['${', '}'],
    data: function () {
        return {
            keyword: "",
            delDisabled: true, //删除禁用
            getCodeDisabled: true, //获取代码
            stopDisabled: true, //停止 禁用
            startDisabled: true, //开始 禁用

            queryParams: {},// 搜索参数

            showPlaceSearch: false, //不显示筛选框
            drawerNewPlace: false, //新增广告位的抽屉drawer

            tableLoading: false,
            page: 1,
            total: 0,//总记录数
            pageSize: 10,//分页数据量
            tablelist: [], //表数据
            multipleSelection: [],//被选中的行
            editRow:{ type: 'html'}, // 编辑某一条记录
        }
    },
    created() {
        this.getListInfo();
    },
   
    filters:{
        filter_disabled(value) {
            return Options.filter_disabled(value);
        },
        filter_type(value) {
            return Options.filter_medias_type(value);
        },
        // 过滤显示广告内容出来，比如图片
 
    },
    methods:{
        //设置 单元格的样式名称
        cellClassName( cell ){           
            // cell = { row, column, rowIndex, columnIndex }
            if (cell.columnIndex >1){
                return "center";
            }
        },
        // v-hmtl 指令 值可以用 method方法处理数据；
        filter_content(content) {
            if(!content) return '--'; 
            var type = content['type'] || '';
            if (type == 'image') {
                return content[type][0]['url'];
              
            }
            // console.log(type)
            if (type == 'txt') {
                var style = "";
                for (var k in content['style']){
                    style += k + ":"+content['style'][k] + ";";
                }
                return '<div class="creative-preview-text" style="' + style + '">  </div>'
               // return '<div class="creative-preview-text" style="' + style+'"> ' + content[type] + ' </div>'
            }
            if(type == 'html'){
                return '<div class="creative-preview-rich">  </div>'
            }
            if(type == 'flash'){
                return '<div class="creative-preview-flash">  </div>'
            }
            if (type == 'video') {
                return '<div class="creative-preview-video">  </div>'
            }
        },
        OnShowPlaceSearch() {
            this.showPlaceSearch = this.showPlaceSearch ? false : true;
            this.$refs.dropIcon.className = this.showPlaceSearch ? " el-icon-caret-bottom" : "el-icon-caret-top";
        },
        //关键词搜索
        onKeywordChange(value) {
            this.queryParams['keyword'] = this.keyword;
            this.getListInfo()
        },
        //六个下拉change触发
        onSelectChange(e) {
            // console.log(e);
            // 把搜索条件 发送给接口 获取列表
            this.page = 1;
            this.queryParams = e;
            this.queryParams['keyword'] = this.keyword;
            this.getListInfo()
        },
       
      
        // 表单组件提交表单 后成功，关闭抽屉
        onCloseDrawer(e) {
            // console.log(e)
            //e == { from: "submit"}
            this.submit = e.from;
            this.$refs.newPlaceDrawer.closeDrawer();
            this.getListInfo();
            /* 
            closeDrawer 方法会先调用  
            下面的 handleDrawerClose 方法进行关闭
             因为设置了 before-close 属性
             所以通过设置一个 submit 变量进行判断 关闭 来自 关闭按钮，还是表单提交后。
             */
        },
        // 点击抽屉右上角 关闭按钮，关闭新建广告位的drawer
        handleDrawerClose(done) {
            // console.log(this.submit)
            if (this.submit == 'submit') {
                done();
                return;
            }
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        handlePageSize(size) {
            this.pageSize = size;
            this.getListInfo()
        },
        handleCurrentChange(page) {
            this.page = page;
            this.getListInfo()

        },
        //全新勾选
        handleSelectionChange(row) {
            this.multipleSelection = row;
        },
        getKeyword() {
            this.page = 1;
            this.getListInfo()
        },
         //新建按钮点击响应事件
        OnOpenDrawer() {
            this.drawerNewPlace = true;
            this.submit = "";
            this.editRow = {};
        },
        handleEdit(index,row) {
            this.editRow = row;
            this.drawerNewPlace = true;  
        },
        handleCopy(index, row) {
            row.id = 0;
            this.editRow = row;
            this.drawerNewPlace = true;
        },
        handleDelete(index, row){
            this.$confirm('此操作将永久删除数据, 是否继续?', '提示').then(() => {
                PlaceAPI.deleteMedias(row.id).then((ret) => {
                    this.$message({ message: ret.msg })
                    this.tablelist.splice(index, 1);
                    --this.total;
                })
            }).catch((e) => { console.log(e) });
        },
        onPreview(scope){
            if(scope.action == 'preview'){
                // this.$message({ message: scope.index })
                window.open("index.php?module=AdsPlace&action=preview&mediasId=" + scope.row.id)
            }
            if(scope.action == 'chart'){
                let href = window.location.href;
                window.location.href = href.replace('medias','mediasReport')+ "&idmedias="+ scope.row.id;
            }
            
        },
        // getAllMedias
        getListInfo() {
            this.tableLoading = true;
            PlaceAPI.getAllMedias(this.page, this.pageSize, this.queryParams).then((data) => {
                this.tableLoading = false;
                
                // 把必须要的参数赋值进去
                
                this.total = data.total;
                this.tablelist = data.data;
                // console.log(data)
            })
        }
    }
})